<template>
    <div class="ipad">
        <main>
            <div v-for="(item,index) in items" :key="index" class="item">
                <product-card :data="item"/>
            </div>
        </main>
        
        <div class="content">
            <img 
                v-for="(item,index) in imgs" 
                :key="index" 
                :src="item" 
            >
        </div>
    </div>
</template>
<script>
import ProductCard from '../components/productCard.vue'
export default{
    components:{
        ProductCard
    },
    data(){
        return{
            items:[
               {
                    name:'Apple iPad Pro 12.9英寸平板电脑',
                    price:'￥8499.00 ',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/169227/26/19966/346977/607f49ceE38151501/79670463a2daaf17.jpg'
                },
                {
                    name:'Apple iPad Pro 11英寸平板电脑',
                    price:'￥6199.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/179515/2/166/319846/607f4c60E036efc64/603bf7b487aacc4b.jpg'
                },
                {
                    name:'Apple iPad Air 10.9英寸 平板电脑',
                    price:'￥4799.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/111952/24/18007/46901/5f616ea4E7891ecc6/11b385fe3e994d05.jpg'
                },
                {
                    name:'Apple iPad 10.2英寸 平板电脑',
                    price:'￥2499.00',
                    src:'https://img14.360buyimg.com/n0/jfs/t1/64979/31/15492/115459/5dd3d4f2E75b0a9a6/95c273eda00e67c0.jpg'
                }
            ],
            imgs:[
                'https://img14.360buyimg.com/n0/jfs/t1/168593/1/20558/229666/607f49d4E83c25b8b/e82c5bb7bfbf69d4.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/185406/19/101/317917/607f49d7E4d889bbd/146172e981c9fcc0.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/180231/3/166/382864/607f49daE323d4976/2cbddab49a7b9537.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/166811/23/19951/158162/607f49dfE54f3e6a5/6d836f94d03ae244.jpg',
                'https://img14.360buyimg.com/n0/jfs/t1/182321/24/140/97310/607f49e4E0033bfc1/71e802e23dd8bfa9.jpg'
            ]
        }
    },
}
</script>
<style scoped>
.ipad main{
    display: flex;
    margin-top: 1em;
}
.ipad main>div+div{
    margin-left: 1em;
}
.ipad .content{
    margin-top: 1em;
}
</style>
        